<template>
  <div>
<!--    顶部信息栏(logo 系统名 用户头像 用户名）开始 -->
    <div style="height: 40px;background-color: aqua;display:flex;align-items:center;
">
      <img src="../assets/img.png" style="width: 40px;margin-left: 20px">
      <span style="margin-left: 10px;font-size: 20px;font-family: 新宋体;color: white">员工管理系统</span>
      <div style="flex:1"></div>

      <el-avatar  :src="data.user.avatar||'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"/>
      <span style="margin-left: 10px;margin-right:10px;font-size: 20px;font-family: 新宋体;color: white">{{data.user.name}}</span>

    </div>
    <!--    顶部信息栏(logo 系统名 用户头像 用户名）结束 -->

<!--    body部分开始-->
    <div style="display: flex">
<!--    左边导航栏开始-->
      <div style="width: 140px;height: calc(100vh - 40px);border-right: #cdcdcd solid 1px">
        <el-menu
            router>
          <el-menu-item index="/manager/home" >
            <el-icon>
              <HomeFilled />
            </el-icon>
              <span>首页</span>
          </el-menu-item>
          <el-menu-item index="/manager/articleDataOp">
            <el-icon><Notebook /></el-icon>
            <span>文章管理</span>
          </el-menu-item>
          <el-sub-menu>
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/manager/employeeDataOp">
              <span>员工信息</span>
            </el-menu-item>
            <el-menu-item index="/manager/adminDataOp">
              <span>管理员信息</span>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/manager/person">
            <el-icon><UserFilled /></el-icon>
            <span>个人信息</span>
          </el-menu-item>
          <el-menu-item index="/manager/password">
            <el-icon><Lock /></el-icon>
            <span>修改密码</span>
          </el-menu-item>

          <el-menu-item @click="logout">
            <el-icon><SwitchButton/></el-icon>
            退出登录
          </el-menu-item>
        </el-menu>

      </div>
<!--    左边导航栏结束-->

<!--    右边数据域开始-->
      <div style="width: calc(100% - 140px)">
        <RouterView @update="update"/>
      </div>
<!--    右边数据域结束-->
    </div>
<!--    body部分结束-->





  </div>
</template>
<script setup>
import { reactive } from "vue"
import router from "@/router/index.js";

const data = reactive({
  user: JSON.parse(localStorage.getItem("zwy-user"))//字符串转化为json对象
})
const logout = ()  => {
  localStorage.removeItem("zwy-user")
  localStorage.removeItem("jwt_token")
  router.replace("/login")
}
const update = () => {
  data.user = JSON.parse(localStorage.getItem("zwy-user"))
}
</script>
